<template>
	<view class="interestPage">
		<template v-if="isLogin">
		<!-- 第一次选择兴趣组件 -->
		<FirstChoice v-if="moduleFlag === 1" @moduleChange="moduleChange" :moduleFlag="moduleFlag" @sure="ChioceSure">
		</FirstChoice>
		<!-- 兴趣主页的内容 -->
		<view class="interestContent" v-if="moduleFlag === 2">
			<!-- <view class="status" style="height: 88rpx"> </view> -->
			<!--  #ifdef MP-WEIXIN -->
			<view class="header-block-bg" :style="{'margin-top':barTop +'rpx','height':190 - barTop + 'rpx'}">
				<image class="image" :style="{'margin-top':searchTop-barTop +'rpx'}"src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/SwitchSmall.png" slot="left" mode=""  @click="moduleChange"></image>
				<view class="tabs_dev" :style="{'margin-top':searchTop-barTop +'rpx'}">
			<!--  #endif -->
			<!--  #ifdef APP-PLUS -->
			<view class="header-block-bg" :style="{'margin-top':88 +'rpx','height': 132 + 'rpx'}">
				<image class="image" :style="{'margin-top':44 +'rpx'}"src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/SwitchSmall.png" slot="left" mode=""  @click="moduleChange"></image>
				<view class="tabs_dev" :style="{'margin-top':44 +'rpx'}">
			<!--  #endif -->
			
					<u-tabs
						class="interest-tabs"
						:list="tabsList"
						lineWidth="50"
						lineHeight="0"
						:lineColor="`url(${tabsLineBg}) 100% 100%`"
						:activeStyle="{ 
							color: '#194FC9',
							fontWeight: 'bold',
							fontSize: '40rpx',
							fontFamily: 'Source Han Sans CN',
							textShadow: '0px 4px 6px rgba(31,118,176,0.13)'
						}"
						:inactiveStyle="{
							color: '#141414 ',
							fontSize: '32rpx',
							fontWeight: 500,
							opacity: 0.5
						}"
						itemStyle="padding-left: 0px; padding-right: 40rpx;"
						@change="tabsChange"
					></u-tabs>
				</view>
			</view>
			<!-- @touchmove.stop="touchMoveInterest" -->
			<view class="interest-content"  @query="getInfo">
				<view class="content_divvv">
					<view v-if="loading" style="margin-top: 20rpx;"><u-loading-icon status="loading" :size="48" text="正在加载..." textSize="32" /></view>
					<u-empty
						v-if="!loading && ((list.length <= 0 && tabsIndex != 0) || (list0.length <= 0 && tabsIndex == 0))"
						mode="data"
						width="400rpx"
						marginTop="150rpx"
						icon="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/empty.png"
						text="没有数据哦~"
					></u-empty>
				</view>
				<!-- <u-empty v-show="!loading&&list0.length===0&&tabsIndex===0" mode="data" width="400rpx" marginTop="150rpx" icon="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/empty.png" text="没有数据哦~"> </u-empty> -->
				<view class="w100" v-if="tabsIndex === 0 && !loading && list0.length > 0">
					<view class="itt-content-boxs" v-for="(series, index) in list0" :key="index">
						<view class="ceshi_button" v-if="series.type == 2" @click="goImprove(series)">
							<img src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/ceshi_button_icon.png" alt="" />
							{{ series.name }}
						</view>
						<template v-else>
							<view class="head">
								<h3 class="title">{{ series.name }}</h3>
								<view class="percentage_div">
									<u-line-progress class="itt-line-progress" :activeColor="series.pace < 60 ? '#FF9F5F' : '##194FC9'" :percentage="series.pace" :height="16">
										<text class="u-percentage-slot">.</text>
									</u-line-progress>
									<view class="u-percentage-numer">{{ series.pace && series.pace.toFixed(2) }}%</view>
								</view>
							</view>
							<scroll-view scroll-x="true" class="list_content">
								<view class="list_ul">
									<courseSeriesCardV2 v-for="(item, idn) in series.courseListVos" :key="idn" :item="item" @goDetail="toCourseInfo(item)" />
								</view>
							</scroll-view>
						</template>
					</view>
				</view>
				<view class="w100" v-show="tabsIndex !== 0 && !loading">
					<courseSeriesCardV2T v-for="(item, index) in list" :key="index" :item="item" @goDetail="toCourseInfo(item)" />
				</view>
			</view>
		</view>
		</template>
		<view class="login_div" v-else>
			<view class="tips_div">
				需要登录后才能查看内容
			</view>
			<button type="primary" @click="goLogin">去登录账号</button>
		</view>
	</view>
</template>

<script>
import FirstChoice from './firstChoice.vue';
import courseSeriesCardV2 from '../wx_subpack/courseSeriesCardV2.vue';
import courseSeriesCardV2T from '../wx_subpack/courseSeriesCardV2T.vue';
import { memberLabel, getMemberInterestCourse, getYzHome } from '../../apis/apis.js';
export default {
	components: {
		FirstChoice,
		courseSeriesCardV2,
		courseSeriesCardV2T
	},
	data() {
		return {
			loading: true,
			// 当前模式 1-兴趣选择或者更换，2-兴趣内容
			moduleFlag: 2,
			titleStyle: {
				'font-size': '32rpx',
				'font-family': 'Source Han Sans CN',
				'font-weight': 600,
				color: '#FFFFFF',
				'line-height': '30rpx',
				'letter-spacing': '6rpx'
			},
			tabsList: [
				{
					name: '书法写作'
				},
				{
					name: '书法写作2'
				},
				{
					name: '书法写作3'
				},
				{
					name: '书法写作4'
				},
				{
					name: '书法写作5'
				}
			],
			tabsLineBg: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/tabs-line.png',
			tabsIndex: 0,
			memberLabelVo: {},
			// 内容列表
			list: [],
			list0: [],
			
			barTop: 0,
			barHeight: 0,
			searchTop: 0,
			barBottom:0,
			// 是否登录
			isLogin:false,
		};
	},
	onLoad() {
		function pxToRpx(px) {
		     const screenWidth = wx.getSystemInfoSync().screenWidth
		     return px * 750 / screenWidth
		   }
		// #ifdef MP-WEIXIN
		let restemp = uni.getMenuButtonBoundingClientRect()
		this.barHeight = restemp.height
		this.barTop = restemp.top
		this.barBottom = restemp.bottom
		this.searchTop = pxToRpx((this.barTop + this.barBottom) / 2 ) - 25;
		this.c = restemp.bottom * 2 + 4 + 'rpx'
		// #endif
		const token = uni.getStorageSync('token');
		this.isLogin = token?true:false;
		if (token) {
			this.getInfo();
		}
	},
	onPullDownRefresh() {
		this.getInfo();
	},
	onShow() {
		// this.getInfo()
	
	},
	methods: {
		goLogin(){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
		// 去随堂测试
		goImprove(item) {
			const { testId } = item;
			if (testId == null || !testId) {
				uni.showToast({
					title: '没有相关测试题',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			uni.navigateTo({
				url: `/pages/index/improve/improve?id=${testId}`
			});
		},
		// 切换当前显示模式
		moduleChange() {
			if (this.moduleFlag === 1) {
				this.moduleFlag = 2;
			} else {
				this.moduleFlag = 1;
			}
		},
		// 获取已选择的行业&岗位及兴趣信息
		getInfo() {
			// if(this.modusleFlag===1) return
			memberLabel().then(res => {
				this.memberLabelVo = res.data || {};
				// if(!this.memberLabelVo || !this.memberLabelVo.labelPostIds){
				// 	uni.$u.toast('请先选择职业体系');
				// 	setTimeout(()=>{
				// 		uni.switchTab({
				// 			url:'/pages/index/index'
				// 		})
				// 	},1000)
				// 	return false;
				// }

				if (this.memberLabelVo.xqlabelPostIds) {
					this.moduleFlag = 2;
				} else {
					this.moduleFlag = 1;
				}
				// 解析参数与重新赋值
				let industryInfo = [];
				if (this.memberLabelVo.xqlabelPostName) {
					industryInfo = this.memberLabelVo.xqlabelPostName.split(',').map((v, index) => ({
						id: (this.memberLabelVo.xqlabelPostIds + '').split(',')[index],
						name: (this.memberLabelVo.xqlabelPostName + '').split(',')[index],
						parentId: (this.memberLabelVo.xqlabelPostOneIds + '').split(',')[index]
					}));
				}
				let otherList = [];
				if (this.memberLabelVo.labelInterestName) {
					otherList = this.memberLabelVo.labelInterestName.split(',').map((v, index) => ({
						id: (this.memberLabelVo.labelInterestIds + '').split(',')[index],
						name: (this.memberLabelVo.labelInterestName + '').split(',')[index]
					}));
				}
				this.tabsList = [...industryInfo, ...otherList];
				if (this.tabsList.length > 0) {
					// this.getInterestCourseList(this.tabsList[0].id)
					// 参数名：type   数据类型（1：行业岗位标签，2：兴趣分类标签）
					getYzHome({
						type: 2
					}).then(res => {
						this.list0 = res.data || res.rows || [];
						this.loading = false;
					});
				}
			});
		},
		// 获取推荐课程列表
		getInterestCourseList(id) {
			getMemberInterestCourse({
				labelInterestId: id
			})
				.then(res => {
					console.log('getMemberInterestCourse:', res);
					this.list = res.data || res.rows || [];
					setTimeout(() => {
						this.loading = false;
						uni.stopPullDownRefresh();
					}, 1000);
				})
				.catch(err => {
					this.loading = false;
					uni.stopPullDownRefresh();
				});
		},
		// 选择确认，切换模式
		ChioceSure() {
			this.moduleFlag = 2;
			this.getInfo();
		},
		//
		tabsChange(val) {
			console.log(val);
			this.loading = true;
			this.tabsIndex = val.index;
			if (this.tabsIndex === 0) {
				getYzHome({
					type: 2
				}).then(res => {
					console.log(res);
					this.list0 = res.data || res.rows || [];
					this.loading = false;
				});
			} else {
				this.getInterestCourseList(val.id);
			}
		},
		// 去系列详情
		toCourseInfo(item) {
			uni.navigateTo({
				url: `/pages/index/courseList/courseList?seriesId=${item.id}`
			});
		},
		touchMoveInterest(e) {
			// console.log('touchMoveInterest:',e)
		}
	}
};
</script>

<style lang="scss" scoped>
.interestPage {
	min-height: calc(100vh);
	box-sizing: border-box;
	background: #eff1f3;
	position: relative;
	margin: 0;
	padding: 0;
}

.header-block-bg {
	margin-top: 88rpx;
	width: 100vw;
	// height: 130rpx;
	display: flex;
	// justify-content: space-between;
	background-color: #fff;
	.image {
		// margin-top: 23rpx;
		margin-left: 27rpx;
		width: 72rpx;
		height: 72rpx;
		position: absolute;	
		align-items: center;
	}
	.tabs_dev {
		margin-left: 16%;
		height: 10vw;
		color: #1a1a1a;
		// width: 100%;
		box-sizing: border-box;
		margin-right: 30%;
	}
}



.interest-tabs {
	width: 100%;
	box-sizing: border-box;
	margin: auto;
	// margin-top: -380rpx;
	font-family: Source Han Sans CN;

	.u-tabs__wrapper__nav__line {
		margin-top: 20rpx !important;
		transform: translateY(30rpx);
	}
}

.interest-content {
	width: 100%;
	height: calc(100vh - 188rpx);
	background-color: #ffffff;
	// margin-top: -160rpx;
	// #ifdef H5
	margin-top: -240rpx;
	// #endif
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 22rpx 22rpx 0 0;
	overflow: auto;
	position: relative;
}

.w100 {
	margin-top: 15rpx;
	width: 100%;
	box-sizing: border-box;
}

.itt-content-boxs {
	margin-top: 15rpx;
	padding-top: 5rpx;
	padding-left: 80rpx;
	margin-bottom: 40rpx;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		width: 61rpx;
		height: 61rpx;
		background: url("https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/DecorationDotSmall.png") no-repeat;
		background-size: cover;
		left: 0rpx;
		top: 0rpx;
		z-index: 11;
	}

	&::before {
		content: '';
		position: absolute;
		height: 100%;
		width: 4rpx;
		background: rgba(188, 211, 237, 0.5);
		left: 30rpx;
		top: 45rpx;
	}

	&:last-child {
		&::before {
			display: none;
		}
	}

	.ceshi_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 25rpx;
		height: 60rpx;
		border-radius: 16rpx;
		background: #369cfe;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		font-weight: normal;
		box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(52, 144, 233, 0.3), 0rpx -2rpx 7rpx 0rpx rgba(54, 156, 254, 0.3);
		margin-bottom: 20rpx;

		& > img {
			height: 24rpx;
			width: 24rpx;
			margin-right: 7rpx;
		}
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
					padding: 10rpx 10rpx;
					font-weight: bold;
					display: inline-flex;
					align-items: flex-end;
					justify-content: center;
					margin-right: 0rpx;
					white-space: nowrap;
					transform: translateY(10rpx);
					height: 20rpx;
					background-image: linear-gradient(90deg, #F7FCFE, #96ABDC);
					overflow: visible !important;
					padding-bottom: 5rpx;
					font-size: 30rpx;
		}

		.percentage_div {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.itt-line-progress {
				display: inline-block;
				margin-right: 0rpx;
				flex: 1;
				width: 100%;
			}

			.u-percentage-numer {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #ff9f5f;
				line-height: 46rpx;
				text-align: right;
				display: inline-block;
				margin-left: 20rpx;
			}

			.u-percentage-slot {
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				background-color: #ffffff;
				margin-right: 10rpx;
				border-radius: 50%;
			}

			.u-percentage-numer-color {
				color: #194FC9;
			}
		}
	}

	.list_content {
		.list_ul {
			padding: 20rpx 0 20rpx 20rpx;

			display: flex;
			flex-wrap: nowrap;
		}
	}
}

.content_divvv {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.login_div{
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.tips_div{
		text-align: center;
		font-size: 32rpx;
		padding-bottom: 60rpx;
		color:#1a1a1a;
	}
	button{
		padding:0 40rpx;
	}
}
</style>
